<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>测试Echarts</title>
	<!-- 引入 ECharts 文件 -->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 50%;height:450px;float: left"></div>
<div id="main2" style="width: 50%;height:450px;float: left"></div>
<div id="main3" style="width: 50%;height:450px;float: left"></div>
<div id="main4" style="width: 50%;height:450px;float: left"></div>
<script type="text/javascript">
	$(document).ready(function(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myChart2 = echarts.init(document.getElementById('main2'));
		var myChart3 = echarts.init(document.getElementById('main3'));
		var myChart4 = echarts.init(document.getElementById('main4'));
		//数据加载完之前先显示一段简单的loading动画
		myChart.showLoading();
		myChart2.showLoading();
		myChart3.showLoading();
		myChart4.showLoading();
		var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
		var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
		var names2=[];    //横坐标数组（实际用来盛放X轴坐标值）
		var values2=[];    //纵坐标数组（实际用来盛放Y坐标值）
		var names3=[];    //横坐标数组（实际用来盛放X轴坐标值）
		var values3=[];    //纵坐标数组（实际用来盛放Y坐标值）
		var names4=[];    //横坐标数组（实际用来盛放X轴坐标值）
		var values4=[];    //纵坐标数组（实际用来盛放Y坐标值）
		$.ajax({
			type : "post",
			async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "http://localhost:9900/getEmployeecounts",    //请求发送到dataActiont处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					for(var i=0;i<result.length;i++){
						names.push(result[i].department);
						values.push(result[i].employee_count);
					}
					myChart.hideLoading();    //隐藏加载动画
					myChart.setOption({        //加载数据图表
						tooltip: {},
						legend: {
							data:['人数']
						},
						xAxis: {
							data: names
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							// 根据名字对应到相应的系列
							name: '人数',//薪资 series not exists. Legend data should be same with series name or data name.
							type: 'bar',
							data: values
						}]
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart.hideLoading();
			}
		});//end ajax

		$.ajax({
			type : "post",
			async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "http://localhost:9900/getEmployeesalary",    //请求发送到dataActiont处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					for(var i=0;i<result.length;i++){
						names2.push(result[i].department);
						values2.push(result[i].employee_salarys);
					}
					myChart2.hideLoading();    //隐藏加载动画
					myChart2.setOption({        //加载数据图表
						tooltip: {},
						legend: {
							data:['薪资']
						},
						xAxis: {
							data: names2
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							// 根据名字对应到相应的系列
							name: '薪资',//薪资 series not exists. Legend data should be same with series name or data name.
							type: 'bar',
							data: values2
						}]
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart2.hideLoading();
			}
		});

		$.ajax({
			type : "post",
			async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "http://localhost:9900/getEmployeesalaryTop5",    //请求发送到dataActiont处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					for(var i=0;i<result.length;i++){
						names3.push(result[i].ename);
						values3.push(result[i].salary);
					}
					myChart3.hideLoading();    //隐藏加载动画
					myChart3.setOption({        //加载数据图表
						tooltip: {},
						legend: {
							data:['薪资']
						},
						xAxis: {
							data: names3
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							// 根据名字对应到相应的系列
							name: '薪资',//薪资 series not exists. Legend data should be same with series name or data name.
							type: 'bar',
							data: values3
						}]
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart3.hideLoading();
			}
		});
		$.ajax({
			type : "post",
			async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "http://localhost:9900/getEmployeecheck",    //请求发送到dataActiont处
			data : {},
			dataType : "json",        //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (result) {
					for(var i=0;i<result.length;i++){
						names4.push(result[i].state);
						values4.push(result[i].count);
					}
					myChart4.hideLoading();    //隐藏加载动画
					myChart4.setOption({        //加载数据图表
						tooltip: {},
						legend: {
							data:['考勤']
						},
						xAxis: {
							data: names4
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							// 根据名字对应到相应的系列
							name: '考勤',//薪资 series not exists. Legend data should be same with series name or data name.
							type: 'bar',
							data: values4
						}]
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart4.hideLoading();
			}
		});
	});

</script>
</body>
</html>